博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
加载静态文件,父模板的继承和扩展
阅读量:5937 次
发布时间:2019-06-19

本文共 5083 字,大约阅读时间需要 16 分钟。

  1. 用url_for加载静态文件
    1. <script src="{
      { url_for('static',filename='js/login.js') }}"></script>
    2. flask 从static文件夹开始寻找
    3. 可用于加载css, js, image文件
  2. 继承和扩展
    1. 把一些公共的代码放在父模板中,避免每个模板写同样的内容。base.html
    2. 子模板继承父模板
      1.   {% extends 'base.html’ %}
    3. 父模板提前定义好子模板可以实现一些自己需求的位置及名称。block
      1. <title>{% block title %}{% endblock %}-MIS问答平台</title>
      2. {% block head %}{% endblock %}
      3. {% block main %}{% endblock %}
    4. 子模板中写代码实现自己的需求。block
      1.   {% block title %}登录{% endblock %}
  3. 首页、登录页、注册页都按上述步骤改写。

 

from flask import Flask,render_templateapp = Flask(__name__)@app.route('/')def shouye():    return render_template('shouye.html')@app.route('/denglu/')def denglu():    return render_template('denglu.html')@app.route('/zhuce/')def zhuce():    return render_template('zhuce.html')if __name__ == '__main__':    app.run()
    
{% block title %} 爱奇艺 {% endblock %}
{% block js %}{% endblock %}

{% block jiemian %}
推荐
{% endblock %}
{% extends'shouye.html' %}{% block title %}用户登录{% endblock %}{% block js %} {% endblock %}{% block jiemian %}
用户名
密码
普通用户
VIP用户
{% endblock %}
{% extends'shouye.html' %}{% block title %}用户注册{% endblock %}{% block js %} {% endblock %}{% block jiemian %}
用户昵称
输入密码
确认密码
普通用户
VIP用户
{% endblock %}
function myLogin() {
var one=document.getElementById("un"); var two=document.getElementById("pw"); var three=document.getElementById("error_box"); var four=document.getElementById("tpw"); if(two.value.length<6){ three.innerHTML="为了账号安全,请输入6个以上的密码!"; return } else if((one.value.charCodeAt(0)>=48)&&one.value.charCodeAt(0)<=57){
three.innerHTML="账号首个不能为数字!"; return } else if (two.value!=four.value){
three.innerHTML="输入密码不一致!请重新输入!"; return } else for(var i=1;i
57)&&(one.value.charCodeAt(i)<97||one.value.charCodeAt(i)>122)){ three.innerHTML="账号只能为数字!"; return } } if(one.value.length<6){
three.innerHTML="账号需为6-12个长度!"; return } window.alert("登录成功!") }
function myLogin() {            var one=document.getElementById("un");            var two=document.getElementById("pw");            var three=document.getElementById("error_box");            if(two.value.length<6){                three.innerHTML="为了账号安全,请输入6个以上的密码!";                return            }              else if((one.value.charCodeAt(0)>=48)&&one.value.charCodeAt(0)<=57){                three.innerHTML="账号首个不能为数字!";                return            }            else for(var i=1;i
57)&&(one.value.charCodeAt(i)<97||one.value.charCodeAt(i)>122)){ three.innerHTML="账号只能为数字!"; return } } if(one.value.length<6){ three.innerHTML="账号需为6-12个长度!"; return } window.alert("登录成功!") }
img{
width: 300px; height: 200px;}.img{
border:1px solid skyblue; width: 300px; height: 250px; float: left; margin: 5px;}.img img{
width:100%; height: 85%;}.desc{
text-align:center; padding: 5px;}.img:hover{
border: 1px solid blue;}p{
color:fuchsia;}.kk{
color:darkcyan;font-weight: bold;font-style: italic;font-size: 20px;}#abc{
color: darkblue;text-decoration: underline;font-size: 25px;}.aaa img{
height:50px; width:50px;}

 

转载于:https://www.cnblogs.com/1996liuda/p/7798276.html

你可能感兴趣的文章
JQuery 如何选择带有多个class的元素
查看>>
The absolute uri: http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or the jar
查看>>
VS快速生成JSON数据格式对应的实体
查看>>
Word2vec 模型载入(tensorflow)
查看>>
Linux内核——定时器和时间管理
查看>>
J2EE之初识JSP
查看>>
RabbitMq消息序列化简述
查看>>
i.e., e.g., etc.
查看>>
git忽略文件【转】
查看>>
Web上的支持的图片格式以及它们之间的区别
查看>>
随意而为
查看>>
jQuery监听文本框值改变触发事件(propertychange)
查看>>
HDU--2040
查看>>
甲骨文Java Archive
查看>>
查看数据库错误日志的位置
查看>>
电信网络拓扑图自动布局
查看>>
C#中List〈string〉和string[]数组之间的相互转换
查看>>
洛谷P1108 低价购买[DP | LIS方案数]
查看>>
通达信里的统计函数及区块背景函数
查看>>
redis主从配置<转>
查看>>